<template>
  <div class="box">
    <my_header></my_header>
    <hr>
    <el-row>
      <el-col
        style="height: 50px;font-size: 30px;text-align: left"
        :span="24">七日热点舆情
      </el-col>
      <hr>
    </el-row>
    <el-row>
      <el-col :span="24">
<!--        <el-table-->
<!--          border-->
<!--          :data="tableData"-->
<!--          class="data_form">-->
<!--          <el-table-column-->
<!--            prop="date"-->
<!--            label="序号"-->
<!--            width="180">-->
<!--          </el-table-column>-->
<!--          <el-table-column-->
<!--            prop="name"-->
<!--            label="标题"-->
<!--            width="180">-->
<!--          </el-table-column>-->
<!--          <el-table-column-->
<!--            prop="address"-->
<!--            label="属性">-->
<!--          </el-table-column>-->
<!--          <el-table-column-->
<!--            prop="address"-->
<!--            label="来源">-->
<!--          </el-table-column>-->
<!--          <el-table-column-->
<!--            prop="address"-->
<!--            label="发表时间">-->
<!--          </el-table-column>-->
<!--        </el-table>-->
        <table class="seven_data_table">
          <tr>
            <th>序号</th>
            <th>标题</th>
            <th>属性</th>
            <th>来源</th>
            <th>发表时间</th>
          </tr>
          <tr v-for="(i,key) in seven_hot_rank_data">
            <td>{{key+1}}</td>
            <td>
              <router-link to="/today_yuqing_detail/1">{{i.title}}</router-link>
            </td>
            <td>{{i.yiqing_shuxing}}</td>
            <td>{{i.yuqing_source}}</td>
            <td>{{i.time}}</td>
          </tr>

        </table>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import my_header from "../../components/my_header";

export default {
  name: "seven_hot_yuQing_detail",
  components: {
    my_header
  },
  data() {
    return {
      seven_hot_rank_data:[]
      /*tableData: [{
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1517 弄'
      }, {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1519 弄'
      }, {
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1516 弄'
      }]*/
    }
  },
  mounted() {
  },
  created() {
    this.getData()
    console.log("seven_hot_yuQing_detail")
  },
  methods:{
    async getData(){
      let {data: res} = await this.$http.get("http://39.102.42.76:3000/mock/11/api/seven-hot-yuqing-rank")
      this.seven_hot_rank_data=res.data
      console.log(this.seven_hot_rank_data)
    }
  }
}
</script>
<style>
* {
  background-color: #415c80;
  /*border: 1px solid #4798A5;*/
}

.time {
  height: 40px;
  color: #ccd8e0;
}

.seven_data_table{
  margin:  0 auto;
  border-radius: 10px;
  border: 1px solid;
}
tr,td{
  height: 30px;
  border: 1px solid;
}

.box {
  width: 1500px;
  /*height: 700px;*/
}

</style>
